<template>
    <el-card class="box-card" shadow="never" body-style="padding:0;">
    <el-form class="box-card-header" :inline="true" ref="qcForm" :model="qcForm"  label-width="120px" size="small" >
      <el-form-item  label="检测模板编码" prop="template_code" >
        <el-input placeholder="请输入检测模板编码" style="width: 215px"  v-model="qcForm.template_code" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item  label="检测模板名称" prop="template_name" >
        <el-input placeholder="请输入检测模板名称" style="width: 215px"  v-model="qcForm.template_name" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item  label="产品编码" prop="item_code" >
        <el-input placeholder="请输入产品编码" style="width: 215px"  v-model="qcForm.item_code" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item  label="产品名称" prop="item_name" >
        <el-input placeholder="请输入产品名称" style="width: 215px"  v-model="qcForm.item_name" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="检测种类" prop="qc_types" >
        <el-checkbox-group v-model="checkedCities">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="submitForm(qcForm)">搜索</el-button>
        <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetForm('qcForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="toolbar">
      <div>
        <el-row>
          <el-button @click="add" type="primary" size="mini" icon="el-icon-plus" plain>新增</el-button>
          <el-button type="success" size="mini" icon="el-icon-edit" :disabled="isUDisable" @click="handleEdit(null,true)" plain>修改</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="isDisable" @click="handleDelete(null,true)" plain>删除</el-button>
          <el-button type="warning" size="mini" icon="el-icon-download" plain>导出</el-button>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-button icon="el-icon-search" size="mini" circle></el-button>
          <el-button icon="el-icon-refresh" size="mini" circle @click="Refresh"></el-button>
        </el-row>
      </div>
    </div>
    <div class="box-card-section">
      <el-table ref="dataTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-if="false" prop="index_id" label="#" align="center"></el-table-column>
        <el-table-column prop="index_code" label="检测项编码" align="center"></el-table-column>
        <el-table-column prop="index_name" label="检测项名称" align="center"></el-table-column>
        <el-table-column prop="index_type" label="检测项类型" align="center"></el-table-column>
        <el-table-column prop="qc_tool" label="检测工具" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
      <pagination :pageindex="Pageindex" :pagesize="PageSize" :total="total" @SizeChange="handleSizeChange" @CurrentChange="handleCurrentChange" />
    </div>
    </div>
    

    <el-dialog width="800px" :title="title" :visible.sync="dialogFormVisible"  @close="closeDialog" :close-on-click-modal="false">
        <el-form :model="model" label-width="100px" :rules="rulesForm" ref="dataForm" size="small">
          <el-row>
          <el-col :span="12" >
            <el-form-item label="检测项编码"  prop="index_code" class="code">
              <!-- <el-row>
                <el-col :span="15">
                  <el-input  v-model="model.index_code" placeholder="请输入检测项编码"  autocomplete="off"></el-input>
                </el-col>
                <el-col :span="9">
                  <el-switch v-model="iscode" active-text="自动生成" active-color="#13ce66" class="sc"></el-switch>                  
                </el-col>
              </el-row> -->
              <el-input  v-model="model.index_code" style="width:215px" placeholder="请输入检测项编码"  autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测项名称"   prop="index_name">
                <el-input  v-model="model.index_name" placeholder="请输入检测项名称"  autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="检测项类型" prop="index_type">
                    <el-select v-model="model.index_type" placeholder="请选择检测项类型"  filterable allow-create default-first-option size="small" clearable>
                        <el-option label="尺寸" value="尺寸"></el-option>
                        <el-option label="外观" value="外观"></el-option>
                        <el-option label="重量" value="重量"></el-option>
                        <el-option label="亮度" value="亮度"></el-option>
                        <el-option label="性能" value="性能"></el-option>
                        <el-option label="成分" value="成分"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检测工具"  prop="qc_tool">
                <el-input  v-model="model.qc_tool" placeholder="请输入检测工具"   autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注"  prop="remark">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="model.remark" placeholder="请输入内容" autocomplete="off"></el-input>
                </el-form-item>
            </el-col>
          </el-row>     
       </el-form>
       <div slot="footer" class="dialog-footer">
              <el-button type="primary"  @click="save">确 定</el-button>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
</el-dialog>

  </el-card>
</template>

<script>
import Pagination from '../../components/Pagination.vue';
const cityOptions = ['来料检验', '首检', '末检', '巡检','成品检验','发货检验'];
export default {
  components: { Pagination },
  data() {
    return {
      checked: false,
      iscode:false,
      title:'添加检测项',
      Pageindex: 1,
      PageSize:10,
      total:0,
      isDisable:true,//是否禁用按钮
      isUDisable:true,//是否禁用修改按钮
      qcForm: {//查询表单
        template_code:'',
        template_name:'',
        item_name:'',
        item_code:'',
      },
      model:{//弹框模型
        template_code:'',
        template_name:'',
        item_name:'',
        item_code:'',
        qc_types:cityOptions,
        },
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      tableData: [
      ],
      dialogFormVisible: false,
      isloading:true,
      isUpdate:false,
      rulesForm:{
                 template_code: [{ required: true, message: '请输入模板编号', trigger: 'blur' }],
                 template_name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
            }
    };
  },
  methods: {
    //多选框事件
    handleSelectionChange(val) {
      if(val.length > 0){
                this.isDisable = false;
            }
            else if(!val.length){
                this.isDisable =true;
            }
            let isTrue = val.length ===1 ? false:true;
            this.isUDisable= isTrue;
    },
    //每页条数改变时
    handleSizeChange(val) {
      this.PageSize=val;
      this.dataBind();
    },
    //当前页改变时
    handleCurrentChange(val) {
      this.Pageindex=val;
      this.dataBind();
    },
    //数据
    dataBind(){
        this.isloading=true;
        const loading = this.$loading();
        this.$http.request({
            type:'get',
            url:'/api/DetectionSettings',
            params:{
                Pageindex:this.Pageindex,
                PageSize:this.PageSize,
                Code:this.index_code,
                Name:this.index_name,
                Type:this.index_type,
            }
        }).then(res=>{
          if(res.data.code==200)
          {
            this.tableData=res.data.data;
            this.total=res.data.count;
          }

        }).catch(err=>{
          console.log(err)
            this.ShowMsg("服务器异常，稍后重试",'error');
        }).finally(()=>{
          //最后
          this.isloading=false;
              setTimeout(()=>{
              loading.close();
            },200);
        })
    },
    //关闭弹框
    closeDialog(){
        this.dialogFormVisible=false;
        this.model={
            describe:'',
            type:'',
            level:''
        }
        
    },
    //刷新
    Refresh(){
      this.dataBind();
    },
    //重置
    resetForm(model){
      this.$refs[model].resetFields();
    },
    //搜索
    submitForm(model){
      this.$http.get("/api/DetectionSettings",{
              params:{
                Pageindex:this.Pageindex,
                PageSize:this.PageSize,
                Code:model.index_code,
                Type:model.index_type,
                Name:model.index_name
            }})
          .then(res=>{
            if(res.data.code==200){
              this.tableData=res.data.data;
              this.total=res.data.count;
            }
          }).catch(err=>{
            this.ShowMsg("服务器异常，稍后重试",'error');
          })
    },
    //提示
    ShowMsg(msg,type='info',title='系统提示'){
      this.$notify({
        message:msg,
        type:type,
        title:title
      });

    },
    //添加
    add(){
        this.dialogFormVisible=true;
        this.title="添加检测项";
        this.isUpdate=false;
    },
    //保存
    save(){
      this.$refs.dataForm.validate((valid)=>{
        if(valid)
        {
          if(this.isUpdate)
          {
            const loading = this.$loading();
            this.$http.putForm("/api/DetectionSettings",{model:this.model})
            .then(res=>{
              if(res.data.code==200){
                this.ShowMsg(res.data.msg,'success');
                this.dataBind();
                this.closeDialog();
              }
            }).catch(err=>{
                this.ShowMsg("服务器异常，稍后重试",'error');
              }).finally(()=>{
                setTimeout(()=>{
                loading.close();
              },500);
              })
          }else{
            const loading = this.$loading();
            this.$http.postForm("/api/DetectionSettings",{model:this.model})
            .then(res=>{
              if(res.data.code==200){
                this.ShowMsg(res.data.msg,'success');
                this.dataBind();
                this.closeDialog();
              }
            }).catch(err =>{
                this.ShowMsg("服务器异常，稍后重试",'error');})
            .finally(()=>{
              setTimeout(()=>{
              loading.close();
            },500);
            })
          }

        }else{
          this.ShowMsg("验证不通过","error");
        }
      })
    },
    //删除
    handleDelete(model,isHeradU=false){
      if(isHeradU){
        let ids = this.$refs.dataTable.selection.map(x=>x.index_id);
        if(ids!=undefined){
          this.$confirm('此操作将永久删除数据, 是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          })
        .then(()=>{
          const loading = this.$loading();
          this.$http.delete("/api/DetectionSettings/DelAll",{params:{Id:ids.join(',')}})
          .then(res=>{
              if(res.data.code==200){
                this.ShowMsg(res.data.msg,'success');
                this.dataBind();
              }
          }).catch(err=>{
          this.ShowMsg('服务器异常，稍后重试','error');
          }).finally(()=>{
              setTimeout(()=>{
              loading.close();
            },500);
            })
        }).catch(()=>{})
        }
      }else{
        let Id=model.defect_id;
        if(Id!=undefined){
          this.$confirm('此操作将永久删除数据,是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).then(()=>{
            const loading = this.$loading();
            this.$http.delete("/api/DetectionSettings",{params:{Id:Id}})
            .then(res=>{
              if(res.data.code==200)
              {
                this.ShowMsg(res.data.msg,'success');
                this.dataBind();
              }
            }).catch(err=>{
              this.ShowMsg('服务器异常，稍后重试','error');
            }).finally(()=>{
              setTimeout(()=>{
              loading.close();
            },500);
            })
          }).catch(()=>{})
        }
        
      }
    },
    //修改
    handleEdit(model,isHeradU=false){
      if(isHeradU){
        model = this.$refs.dataTable.selection[0];//获取当前表格选择项
      }
      console.log(model)
      this.title="修改检测项";
      this.dialogFormVisible = true;
      this.isUpdate = true;
      this.model = model;
    },
  },
  created(){
    this.dataBind();
  }
};
</script>

<style scoped>
    .toolbar {
        display: flex;
        justify-content: space-between;
        padding: 0px 15px;
    }
    .block{
        padding: 10px;
    }
    .box-card-header{
        padding-top: 20px;
    }
    .box-card-section{
        padding: 20px;
    }
    .dl-mn{
      padding-left: 15px;
    }
</style>